<template>
	<view class="user-feedback">
		<view class="user-feedback-tips">欢迎您给我们提出系统使用感受和建议！</view>
		<view class="user-feedback-group">
			<view class="user-feedback-cell">
				<view class="label">留言类型<text>*</text></view>
				<view class="value">
					<u-radio-group v-model="form.type" size="30">
						<u-radio v-for="(item, index) in typeList" :key="index" :name="item.value" activeColor="#f59359">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="user-feedback-cell">
				<view class="label">您的留言<text>*</text></view>
				<view class="value">
					<textarea placeholder="请输入您的留言或反馈" v-model="form.content"></textarea>
				</view>
			</view>
			<view class="user-feedback-cell">
				<view class="label">上传图片</view>
				<view class="value" style="margin-left: -10rpx;">
					<u-upload ref="uUpload" :action="action"></u-upload>
				</view>
			</view>
		</view>
		<view class="user-feedback-btn"><text @click="submit">提交</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
					name: '功能建议',
					value: 1
				},{
					name: '产品服务',
					value: 2
				},{
					name: '故障措施',
					value: 3
				},{
					name: '其他',
					value: 4
				}],
				action: `${this.$domain}/api/Upimg/UpImg`,
				form: {
					type: '',
					content: '',
					images: ''
				}
			};
		},
		methods: {
			submit(){
				if(!this.form.type){
					return uni.showToast({
						icon: 'none',
						title: '请选择留言类型'
					})
				}else if(!this.form.content){
					return uni.showToast({
						icon: 'none',
						title: '请输入您的留言'
					})
				}
				let list = []
				if(this.$refs.uUpload.lists.length){
					this.$refs.uUpload.lists.forEach(item => {
						list.push(item.response.datas[0])
					})
				}
				this.form.images = list.join(',')
				this.$u.api.UpMessage(this.form).then(res => {
					uni.showToast({
						icon: 'none',
						title: '感谢您的反馈,我们将竭尽全力做好优化',
						success: () => {
							setTimeout(() => {
								uni.navigateBack({
									animationDuration: 500
								})
							},2000)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-feedback{
		padding: 30rpx;
		.user-feedback-tips{
			font-size: 24rpx;
			color: #f59359;
			line-height: 50rpx;
		}
		.user-feedback-group{
			.user-feedback-cell{
				margin-top: 30rpx;
				.label{
					font-size: 24rpx;
					margin-bottom: 20rpx;
					color: #666;
					text{
						color: #f59359;
					}
				}
				/deep/ .u-radio__label{
					font-size: 24rpx !important;
				}
				.value{
					textarea{
						padding: 20rpx;
						font-size: 26rpx;
						line-height: 48rpx;
						border: solid 1px #EEE;
						border-radius: 8rpx;
						width: 100%;
						box-sizing: border-box;
					}
				}
			}
		}
		.user-feedback-btn{
			padding: 30rpx 0 0;
			text{
				display: block;
				line-height: 90rpx;
				text-align: center;
				background-color: #141414;
				color: #FFF;
				font-size: 32rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>
